import React, { Component, PureComponent } from 'react'

// 将要继承的Component改为PureComponent，可实现shouldComponentUpdate功能，即判断属性值有改变才更新；
// 要注意PureComponent只能用在class组件中，且只能对浅比较判断，即对象第一层的比较，而深比较依然会让组件渲染。
// export default class PureComponentPage extends Component {
export default class PureComponentPage extends PureComponent {
    state = {
        counter: 0,
        data: { muber: 0 }
    }

    setCounter = () => {
        this.setState({ counter: 100 })
    }
   setCounter2 = () => {
        this.setState({ data:{number:200}  })
    }
    // 如果是继承的普通组件Component，就需要以此方法来判断要更新的值来阻止不必要的渲染
    // 这里可以阻止state深层次嵌套的比较
      /* shouldComponentUpdate(nextProps,nextState){
          return nextState.counter !== this.state.counter
      } */
    render() {
        console.log('~~render')
        const { counter, data } = this.state
        return <>
        <p>请观察控制台的“~~render”打印</p>
            <button onClick={this.setCounter}>counter:{counter}</button>
            <button onClick={this.setCounter2}>嵌套state的值:{data.number}</button>
            <ol >
                <li>使用Component而不使用shouldComponentUpdate，则无论state是否改变，set后一定会重新渲染</li>
                <li>使用Component和shouldComponentUpdate，可以通过判断特定state的改变，来决定是否重新渲染</li>
                <li>使用PureComponent，组件会自动判断state的第一层，来决定是否重新渲染；而set深层的数据即使没有改变也会渲染</li>
            </ol>
        </>


    }
}